{% extends "base.html" %}

{% block title %}电影列表 - 电影管理系统{% endblock %}

{% block content %}
    <!-- 搜索栏 -->
    <div class="row mb-4">
        <div class="col-md-8 offset-md-2">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="搜索电影..." id="searchInput">
                <button class="btn btn-primary" type="button">
                    <i class="fas fa-search"></i>
                </button>
            </div>
        </div>
    </div>

    <!-- 电影分类筛选 -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="btn-group" role="group">
                <button type="button" class="btn btn-outline-primary active">全部</button>
                <button type="button" class="btn btn-outline-primary">动作</button>
                <button type="button" class="btn btn-outline-primary">科幻</button>
                <button type="button" class="btn btn-outline-primary">喜剧</button>
                <button type="button" class="btn btn-outline-primary">剧情</button>
                <button type="button" class="btn btn-outline-primary">悬疑</button>
            </div>
        </div>
    </div>

    <!-- 电影列表 -->
    <div class="row g-4">
        {% for movie in movies %}
            <div class="col-md-4 col-lg-3">
                <div class="card movie-card position-relative">
                    <!-- 评分徽章 -->
                    <span class="badge bg-danger rating-badge">
                    <i class="fas fa-star"></i> {{ movie.rating }}
                </span>

                    <img src="{{ movie.poster_url }}" class="card-img-top movie-poster" alt="{{ movie.title }}">

                    <div class="card-body d-flex flex-column">
                        <h5 class="card-title">{{ movie.title }}</h5>
                        <p class="text-muted small mb-2">{{ movie.year }} | {{ movie.genre }}</p>
                        <p class="card-text flex-grow-1 text-truncate-3">{{ movie.description }}</p>

                        <div class="mt-3 d-flex justify-content-between align-items-center">
                            <button class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal"
                                    data-bs-target="#movieDetailModal-{{ movie.id }}">
                                <i class="fas fa-info-circle"></i> 详情
                            </button>
                            <button class="btn btn-sm btn-danger btn-delete" onclick="deleteMovie('{{ movie.id }}')">
                                <i class="fas fa-trash-alt"></i> 删除
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        {% endfor %}

        <!-- 空状态 -->
        {% if not movies %}
            <div class="col-12 text-center py-5 empty-state">
                <div class="empty-state-content">
                    <i class="fas fa-film text-muted" style="font-size: 5rem;"></i>
                    <h3 class="mt-3 text-muted">暂无电影数据</h3>
                    <p class="text-muted">点击"添加电影"按钮添加新电影</p>
                    <button class="btn btn-primary mt-3" data-bs-toggle="modal" data-bs-target="#addMovieModal">
                        <i class="fas fa-plus-circle me-1"></i>添加电影
                    </button>
                </div>
            </div>
        {% endif %}
    </div>
{% endblock %}

{% block modals %}
    <!-- 添加电影模态框 -->
    <div class="modal fade" id="addMovieModal" tabindex="-1" aria-labelledby="addMovieModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addMovieModalLabel">添加新电影</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="addMovieForm">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label for="movieTitle" class="form-label">电影名称</label>
                                <input type="text" class="form-control" id="movieTitle" required>
                            </div>
                            <div class="col-md-6">
                                <label for="movieYear" class="form-label">上映年份</label>
                                <input type="number" class="form-control" id="movieYear" min="1900"
                                       max="{{ current_year + 5 }}" required>
                            </div>
                            <div class="col-md-6">
                                <label for="movieGenre" class="form-label">类型</label>
                                <select class="form-select" id="movieGenre" required>
                                    <option value="">选择类型</option>
                                    <option value="动作">动作</option>
                                    <option value="科幻">科幻</option>
                                    <option value="喜剧">喜剧</option>
                                    <option value="剧情">剧情</option>
                                    <option value="悬疑">悬疑</option>
                                    <option value="爱情">爱情</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label for="movieRating" class="form-label">评分</label>
                                <input type="number" class="form-control" id="movieRating" min="0" max="10" step="0.1"
                                       required>
                            </div>
                            <div class="col-12">
                                <label for="moviePoster" class="form-label">海报URL</label>
                                <input type="url" class="form-control" id="moviePoster" required>
                            </div>
                            <div class="col-12">
                                <label for="movieDescription" class="form-label">简介</label>
                                <textarea class="form-control" id="movieDescription" rows="3" required></textarea>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="saveMovieBtn">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 电影详情模态框 -->
    {% for movie in movies %}
        <div class="modal fade" id="movieDetailModal-{{ movie.id }}" tabindex="-1"
             aria-labelledby="movieDetailModalLabel-{{ movie.id }}" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="movieDetailModalLabel-{{ movie.id }}">{{ movie.title }} - 详情</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-4">
                                <img src="{{ movie.poster_url }}" class="img-fluid rounded" alt="{{ movie.title }}">
                            </div>
                            <div class="col-md-8">
                                <h3>{{ movie.title }}</h3>
                                <div class="mb-3">
                                    <span class="badge bg-primary me-2">{{ movie.year }}</span>
                                    <span class="badge bg-secondary me-2">{{ movie.genre }}</span>
                                    <span class="badge bg-danger">
                                    <i class="fas fa-star"></i> {{ movie.rating }}
                                </span>
                                </div>
                                <h5>剧情简介</h5>
                                <p>{{ movie.description }}</p>
                                <div class="mt-4">
                                    <h6>更多信息</h6>
                                    <p>导演：待定</p>
                                    <p>演员：待定</p>
                                    <p>片长：待定</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>
    {% endfor %}
{% endblock %}

{% block extra_js %}
    <script>
        // 页面特定的JavaScript
        document.addEventListener('DOMContentLoaded', function () {
            // 检查初始空状态
            checkEmptyState();
        });
    </script>
{% endblock %}